<template>
  <el-table
      :data="dormitoryList"
      style="width: 100%"
      @expand-change="handleExpendRow"
  >
    <el-table-column type="expand">
      <template slot-scope="scope">
        <el-table
            :data="scope.row.children"
            :header-cell-style="tableHeaderColor"
            style="width: 100%">
          <el-table-column
              prop="roomId"
              label="房间号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="nowNumber"
              label="现有人数"
              width="180">
          </el-table-column>
          <el-table-column
              prop="maxNumber"
              label="可居住人数">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="dormId" label="宿舍编号" width="160px"></el-table-column>
    <el-table-column prop="dormName" label="宿舍名称"></el-table-column>
    <el-table-column label="类别" sortable>
      <template slot-scope="scope">
        <span v-if="scope.row.dormType == 2">男宿舍楼</span>
        <span v-else-if="scope.row.dormType == 3">女宿舍楼</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      dormitoryList: null,
      dormTypeList: null,
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    }
  },
  created() {
    this.fetchData()
    this.getDormType()
  },
  methods: {
    setSelectRows(val) {
      this.selectRows = val
    },
    handleExpendRow(row, expandedRows) {
      // 打印父任务内容
      console.log(row)
      // let vm = this;
      // let params = {
      //   taskId: row.id
      // };
      // getSearchSubTask(params).then(res => {
      //   this.tableData2 = res.results;
      // });
      //如果展开行数大于1
      if(expandedRows.length>0){
        //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
        expandedRows.shift();
      }
    },
    tableHeaderColor(){
      // console.log(row,columnIndex,rowIndex,column)
      return 'background-color:white;color:lightslategray;font-size:14px;'

    },

    // 监听添加课件对话框的关闭事件
    addDialogClosed() {
      this.$refs.addRuleFormRef.resetFields()
    },
    // 添加宿舍
    addDorm() {
      this.$refs.addRuleFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求
        const {data: res} = await this.$http.post('addDorm',this.addForm)
        // console.log(res)
        if (res.code != 200)
          return this.$message.error('添加失败，' + res.msg)
        this.$message.success('用户添加成功！')
        this.addDialogVisible = false
        this.fetchData()
      })
    },
    handleEdit() {
      // TODO

    },
    // 删除
    async handleDelete(id) {
      // 提示消息
      const re = await this.$confirm('此操作将是永久性的, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)

      // console.log(re)
      if (re != 'confirm') return this.$message.info('取消了删除')

      const {data: res} = await this.$http.get('delDorm?id='+ id)

      if (res.code != 200) return this.$message.error('删除失败！')

      this.$message.success('删除成功！')
      this.fetchData()
    },
    handleSizeChange() {

    },
    handleCurrentChange() {
    },
    queryData() {
    },
    async fetchData() {
      const {data : res} = await this.$http.get('dormitories')
      // console.log(res)
      this.dormitoryList = res.data
    },
    async getDormType() {
      const {data : res} = await this.$http.get('dormType')
      // console.log(res)
      this.dormTypeList = res.data
    }
  }
}
</script>

<style lang="less" scoped>

.dormManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
  background: lightslategray;
}

/* 表格标题样式 */
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 20px;
  line-height: 20px;
  background-color: #969896;
  color: #fff;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
  line-height: 30px;
  color: #000;
}
.header-btn {
  //text-align: left;
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //color: black;
  //font-size: 20px;

  >.editAdd {
    height: 42px;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .query {
    height: 22px;
    margin-top: 22px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
  }
}
.el-table >.el-table-column {
  height: 12px;
}


</style>
